<!--
推荐type=3时，代理商的功能，BD没有
-->
<!--
推荐type=3时，代理商的功能，BD没有
-->
<template>
    <div class="storehouse">
      <wv-tabs swipeable>
        <wv-tab title="商品列表">
          <div class="weui-panel weui-panel_access">
           <!----> 
           <div class="weui-panel__bd">
            <div class="weui-media-box weui-media-box_appmsg">
             <div class="weui-media-box__hd">
              <img src="https://gd4.alicdn.com/imgextra/i3/291631227/TB2R95Ue3nH8KJjSspcXXb3QFXa_!!291631227.jpg_400x400.jpg" alt="" class="weui-media-box__thumb" />
             </div> 
             <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">商品1</h4> 
              <p class="weui-media-box__desc">dfasdfadf</p>
              <button class="orderding">下单</button>
             </div>
            </div>
           </div> 
           <div data-v-4bd2a58c="" class="weui-panel__ft"></div>
          </div>

          <div class="weui-panel weui-panel_access">
           <!----> 
           <div class="weui-panel__bd">
            <div class="weui-media-box weui-media-box_appmsg">
             <div class="weui-media-box__hd">
              <img src="https://gd4.alicdn.com/imgextra/i3/291631227/TB2R95Ue3nH8KJjSspcXXb3QFXa_!!291631227.jpg_400x400.jpg" alt="" class="weui-media-box__thumb" />
             </div> 
             <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">商品2</h4> 
              <p class="weui-media-box__desc">dfasdfadf</p>
              <button class="orderding">下单</button>
             </div>
            </div>
           </div> 
           <div data-v-4bd2a58c="" class="weui-panel__ft"></div>
          </div>


          <div class="weui-panel weui-panel_access">
           <!----> 
           <div class="weui-panel__bd">
            <div class="weui-media-box weui-media-box_appmsg">
             <div class="weui-media-box__hd">
              <img src="https://gd4.alicdn.com/imgextra/i3/291631227/TB2R95Ue3nH8KJjSspcXXb3QFXa_!!291631227.jpg_400x400.jpg" alt="" class="weui-media-box__thumb" />
             </div> 
             <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">商品1</h4> 
              <p class="weui-media-box__desc">dfasdfadf</p>
              <button class="orderding">下单</button>
             </div>
            </div>
           </div> 
           <div data-v-4bd2a58c="" class="weui-panel__ft"></div>
          </div>

          <div class="weui-panel weui-panel_access">
           <!----> 
           <div class="weui-panel__bd">
            <div class="weui-media-box weui-media-box_appmsg">
             <div class="weui-media-box__hd">
              <img src="https://gd4.alicdn.com/imgextra/i3/291631227/TB2R95Ue3nH8KJjSspcXXb3QFXa_!!291631227.jpg_400x400.jpg" alt="" class="weui-media-box__thumb" />
             </div> 
             <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">商品1</h4> 
              <p class="weui-media-box__desc">dfasdfadf</p>
              <button class="orderding">下单</button>
             </div>
            </div>
           </div> 
           <div data-v-4bd2a58c="" class="weui-panel__ft"></div>
          </div>

          <div class="weui-panel weui-panel_access">
           <!----> 
           <div class="weui-panel__bd">
            <div class="weui-media-box weui-media-box_appmsg">
             <div class="weui-media-box__hd">
              <img src="https://gd4.alicdn.com/imgextra/i3/291631227/TB2R95Ue3nH8KJjSspcXXb3QFXa_!!291631227.jpg_400x400.jpg" alt="" class="weui-media-box__thumb" />
             </div> 
             <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">商品1</h4> 
              <p class="weui-media-box__desc">dfasdfadf</p>
              <button class="orderding">下单</button>
             </div>
            </div>
           </div> 
           <div data-v-4bd2a58c="" class="weui-panel__ft"></div>
          </div>

          <div class="weui-panel weui-panel_access">
           <!----> 
           <div class="weui-panel__bd">
            <div class="weui-media-box weui-media-box_appmsg">
             <div class="weui-media-box__hd">
              <img src="https://gd4.alicdn.com/imgextra/i3/291631227/TB2R95Ue3nH8KJjSspcXXb3QFXa_!!291631227.jpg_400x400.jpg" alt="" class="weui-media-box__thumb" />
             </div> 
             <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">商品1</h4> 
              <p class="weui-media-box__desc">dfasdfadf</p>
              <button class="orderding">下单</button>
             </div>
            </div>
           </div> 
           <div data-v-4bd2a58c="" class="weui-panel__ft"></div>
          </div>

          <div class="weui-panel weui-panel_access">
           <!----> 
           <div class="weui-panel__bd">
            <div class="weui-media-box weui-media-box_appmsg">
             <div class="weui-media-box__hd">
              <img src="https://gd4.alicdn.com/imgextra/i3/291631227/TB2R95Ue3nH8KJjSspcXXb3QFXa_!!291631227.jpg_400x400.jpg" alt="" class="weui-media-box__thumb" />
             </div> 
             <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">商品1</h4> 
              <p class="weui-media-box__desc">dfasdfadf</p>
              <button class="orderding">下单</button>
             </div>
            </div>
           </div> 
           <div data-v-4bd2a58c="" class="weui-panel__ft"></div>
          </div>
          <div class="weui-panel weui-panel_access">
           <!----> 
           <div class="weui-panel__bd">
            <div class="weui-media-box weui-media-box_appmsg">
             <div class="weui-media-box__hd">
              <img src="https://gd4.alicdn.com/imgextra/i3/291631227/TB2R95Ue3nH8KJjSspcXXb3QFXa_!!291631227.jpg_400x400.jpg" alt="" class="weui-media-box__thumb" />
             </div> 
             <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">商品1</h4> 
              <p class="weui-media-box__desc">dfasdfadf</p>
              <button class="orderding">下单</button>
             </div>
            </div>
           </div> 
           <div data-v-4bd2a58c="" class="weui-panel__ft"></div>
          </div>
          <div class="weui-panel weui-panel_access">
           <!----> 
           <div class="weui-panel__bd">
            <div class="weui-media-box weui-media-box_appmsg">
             <div class="weui-media-box__hd">
              <img src="https://gd4.alicdn.com/imgextra/i3/291631227/TB2R95Ue3nH8KJjSspcXXb3QFXa_!!291631227.jpg_400x400.jpg" alt="" class="weui-media-box__thumb" />
             </div> 
             <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">商品1</h4> 
              <p class="weui-media-box__desc">dfasdfadf</p>
              <button class="orderding">下单</button>
             </div>
            </div>
           </div> 
           <div data-v-4bd2a58c="" class="weui-panel__ft"></div>
          </div>
          <div class="weui-panel weui-panel_access">
           <!----> 
           <div class="weui-panel__bd">
            <div class="weui-media-box weui-media-box_appmsg">
             <div class="weui-media-box__hd">
              <img src="https://gd4.alicdn.com/imgextra/i3/291631227/TB2R95Ue3nH8KJjSspcXXb3QFXa_!!291631227.jpg_400x400.jpg" alt="" class="weui-media-box__thumb" />
             </div> 
             <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">商品1</h4> 
              <p class="weui-media-box__desc">dfasdfadf</p>
              <button class="orderding">下单</button>
             </div>
            </div>
           </div> 
           <div data-v-4bd2a58c="" class="weui-panel__ft"></div>
          </div>
          <div class="weui-panel weui-panel_access">
           <!----> 
           <div class="weui-panel__bd">
            <div class="weui-media-box weui-media-box_appmsg">
             <div class="weui-media-box__hd">
              <img src="https://gd4.alicdn.com/imgextra/i3/291631227/TB2R95Ue3nH8KJjSspcXXb3QFXa_!!291631227.jpg_400x400.jpg" alt="" class="weui-media-box__thumb" />
             </div> 
             <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">商品1</h4> 
              <p class="weui-media-box__desc">dfasdfadf</p>
              <button class="orderding">下单</button>
             </div>
            </div>
           </div> 
           <div data-v-4bd2a58c="" class="weui-panel__ft"></div>
          </div>
          
        </wv-tab>
        <wv-tab title="我的库存">
           <wv-panel>
              <wv-media-box :thumb="thumb" title="商品1" description="库存：1000" to="/"></wv-media-box>
            </wv-panel>
            <wv-panel>
              <wv-media-box :thumb="thumb" title="商品2" description="库存：2000" to="/"></wv-media-box>
            </wv-panel>
            <wv-panel>
              <wv-media-box :thumb="thumb" title="商品3" description="库存：3000" to="/"></wv-media-box>
            </wv-panel>
            <wv-panel>
              <wv-media-box :thumb="thumb" title="商品4" description="库存：4000" to="/"></wv-media-box>
            </wv-panel>
        </wv-tab>
        <wv-tab title="订货单列表">
          <ul class="lazyload-list">
            <li class="lazyload-list-item" v-for="(item, index)  in list">
              <div class="box">
                <img v-lazy="item.pic" class="lazyload-image goods_pic">
                <div class="info">
                  <div class="name">商品名:红色拖鞋1红色拖鞋1红色拖鞋1</div>
                  <div class="price">价格: 3元/双</div>
                </div>
                
                <div class="opretion">取消</div>
              </div>
            </li>
          </ul>
           <!-- <div class="item">
             <div class="left_pic">
               <img v-lazy="" class="lazyload-image">
               <span>商品1111</span>
               <span>价格：3元/双</span>
             </div>
             <div class="ringt_btn">取消</div>
           </div> -->
        </wv-tab>
      </wv-tabs>

      <tabbar :type="type"></tabbar>
    </div>
</template>

<script>
import info from '../info.js'
import tabbar from '../views/tabbar'

import homepic from "../../static/img/home.png"

export default {
  name: "storehouse",
  data(){
      return{
        type: Number(this.$route.query.type),
        thumb:"https://gd4.alicdn.com/imgextra/i3/291631227/TB2R95Ue3nH8KJjSspcXXb3QFXa_!!291631227.jpg_400x400.jpg",
        description:"dfasdfadf",
        list: [
          {
            name:"商品1",
            price:5,
            pic:'https://gd4.alicdn.com/imgextra/i3/291631227/TB2R95Ue3nH8KJjSspcXXb3QFXa_!!291631227.jpg_400x400.jpg',
            stauts:0
          },
          {
            name:"商品2",
            price:5,
            pic:'https://gd4.alicdn.com/imgextra/i3/291631227/TB2R95Ue3nH8KJjSspcXXb3QFXa_!!291631227.jpg_400x400.jpg',
            stauts:1
          },
          {
            name:"商品3",
            price:5,
            pic:'https://gd4.alicdn.com/imgextra/i3/291631227/TB2R95Ue3nH8KJjSspcXXb3QFXa_!!291631227.jpg_400x400.jpg',
            stauts:2
          },
          {
            name:"商品4",
            price:5,
            pic:'https://gd4.alicdn.com/imgextra/i3/291631227/TB2R95Ue3nH8KJjSspcXXb3QFXa_!!291631227.jpg_400x400.jpg',
            stauts:0
          }
        ]
      }
  },
  methods: {
    onHeaderClick(){

    }
  },
  created() {
    console.log(this.type+"====tyue")
  },
  components: {
    tabbar
  },
 
  
};
</script>


<style lang="scss">
@import '../base/reset.scss';
@import "../base/common.scss";

.storehouse {
  .wv-tabs--line {
    .wv-tabs__wrap {
      height: pxTorem(80);
      border: none
    }
  }

  .weui-panel {
    margin-top:0;
    &:before {
      border-top: 0;
    }
  }
  
  .orderding {
    position: absolute;
    right: pxTorem(30);
    top: pxTorem(60);
    line-height: pxTorem(60);
    width: pxTorem(100);
    font-size: pxTorem(24);
    height: pxTorem(60);
    color: #1aad19;
    border: 1px solid #eeeeee;
    border-radius: pxTorem(40);
    background: none;
  }
  .weui-media-box__hd {
    margin-right: .8em;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
  .weui-media-box__thumb {
    width: 100%;
    max-height: 100%;
    vertical-align: top;
  }
  .wv-tabs__content {
    margin-top: pxTorem(20);
    margin-bottom: pxTorem(100)
  }
  .wv-tab {
    font-size: pxTorem(28)
  }
  .weui-media-box__title {
    font-size: pxTorem(28)
  }
  .weui-media-box__desc {
    font-size: pxTorem(28)
  }
  .weui-panel__bd {
    text-align: left;
    .weui-media-box__thumb {
        border: 1px solid #eeeeee;
    }
  }
  .lazyload-list {
    text-align: left;
    li {
      position: relative;
      .box {
        padding: pxTorem(30);
        
        @include flex-box();
        align-items: center;
      }
      &:after {
        content: " ";
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        color: #e5e5e5;
        bottom: 0;
        border-bottom: 1px solid #e5e5e5;
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
      }
    } 
    .goods_pic {
      width: pxTorem(120);
      height: pxTorem(120);
      border: 1px solid #eeeeee;
    }
    .info {
      margin-left: pxTorem(20);
      width: pxTorem(400);
      font-size: pxTorem(28);
      
      .name {
        width: 100%;
        @include text-overflow();
      }

    }
    .opretion {
      width: pxTorem(100);
      position: absolute;
      right: pxTorem(30);
      top: pxTorem(60);
      line-height: pxTorem(60);
      width: pxTorem(100);
      font-size: pxTorem(24);
      height: pxTorem(60);
      color: #1aad19;
      border: 1px solid #eeeeee;
      border-radius: pxTorem(40);
      text-align: center;
      box-sizing: border-box;
    }

  }
  
  
}


</style>